<template>
<el-container class="layout-container-demo" style="height: 100vh; overflow: hidden">
  <el-header style="text-align: right; font-size: 12px;height: 50px;">
    <div class="toolbar">
      <div style="display: flex;position: absolute;left: 30px">
        <div>
          <el-image style="width: 50px; height: 50px" src="http://127.0.0.1:9090/pet/yys1.png" fit="fill" />
        </div>
        <h1 style="line-height: 50px;margin-left: 10px;">
          {{userStore.brand.brandName}}
        </h1>
      </div>
      <el-dropdown>
        <el-icon style="margin-right: 8px; margin-top: 1px">
          <setting />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
<!--      <span>{{userStore.user.username}}</span>-->
    </div>
  </el-header>

  <el-container>
    <el-aside width="auto" style="margin: 8px 0 0 8px;">
        <el-scrollbar height="95vh;">
          <el-menu
            default-active="statistics"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            @mouseenter="isCollapse = false"
            @mouseleave="isCollapse = true"
            router
          >

            <el-sub-menu v-for="menu in menus" :key="menu.name" :index="menu.name" v-if="isAdminValue">
              <template #title>
                <el-icon>
                  <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="item in menu.children" :key="item.name" :index="item.path" :route="item.path">
                {{ item.name }}
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-for="menu in menusUser" :key="menu.icon" :index="menu.name" v-else>
              <template #title>
                <el-icon>
                  <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="item in menu.children" :key="item.name" :index="item.path" :route="item.path">
                {{ item.name }}
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
    </el-aside>
    <el-main>
        <div style="margin: 15px;">
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" :to="item.path">
              {{ item.meta?.title || item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      <el-card style="margin: 10px;height: 88vh;">
        <el-scrollbar height="95vh">
            <router-view v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
        </el-scrollbar>
      </el-card>
    </el-main>
  </el-container>
</el-container>
</template>

<script lang="ts" setup>
import {
  Setting
} from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import {useLoginStore} from "@/stores/login";
import { ElMessageBox } from 'element-plus'

const isCollapse = ref(true)
const userStore = useLoginStore();
const isAdminValue = ref<boolean>(localStorage.getItem("brandId")==0)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const menus = [
  {
    name: '统计分析',
    icon: 'DataAnalysis',
    path: 'statistics',
    permission:1,
    children: [
      { name: '数据概览', path: 'statistics' }
    ]
  },
  {
    name: '店铺管理',
    icon: 'SetUp',
    path: 'feedback',
    permission:1,
    children: [
      { name: '修改店铺', path: 'feedback' }
    ]
  },
  {
    name: '商品管理',
    icon: 'Goods',
    path: 'goods',
    permission:1,
    children: [
      { name: '商品列表', path: 'goods' }
    ]
  },
  {
    name: '订单管理',
    icon: 'Van',
    path: 'orders',
    permission:1,
    children: [
      { name: '订单列表', path: 'orders' }
    ]
  },
  {
    name: '优惠券管理',
    icon: 'Money',
    path: 'coupons',
    permission:1,
    children: [
      { name: '优惠券列表', path: 'coupons' }
    ]
  },
  {
    name: '客户服务',
    icon: 'Headset',
    permission:1,
    path: 'customer-service',
    children: [
      { name: '客服列表', path: 'customer-service' }
    ]
  }
]
const menusUser = [
  {
    name: '用户管理',
    icon: 'UserFilled',
    path: 'users',
    permission:0,
    children: [
      { name: '用户列表', path: 'users' }
    ]
  }
]
// 面包屑列表
const breadcrumbList= ref([])

const route = useRoute()
const loginOut = ()=>{
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      userStore.logout();
    })
    .catch((e) => {
      console.log(e)
      // 用户点击“取消”按钮，不做任何操作
      console.log('取消退出');
    });
}
// 监听路由变化，更新面包屑列表
watch(
  () => route.matched,
  (newMatched) => {
    breadcrumbList.value = newMatched
  },
  { immediate: true }
)
</script>

<style scoped>
.layout-container-demo{
}
.layout-container-demo .el-header {
  position: relative;
  border-bottom: 1px solid black;
  height: 4%;
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
